<template>
    <div class="common-layout">

        <el-row>
            <el-table :data="state.tableData" 
            :cell-class-name="tableColumnClassName"
            @sort-change="sortChange"
            @cell-click="tableCellClick"
            :default-sort="state.sort"
            style="width: 100%" height="800">
                <el-table-column prop="tag" fixed label="Tag" width="120"/>
                <el-table-column sortable
                    v-for="date in state.dates" width="120"
                    :key="date" 
                    :prop="date" 
                    :label="date"/>

            </el-table>
        </el-row>
    </div>
</template>
  
<script>
import { reactive } from 'vue'
import { getWeekTagScoreStat } from '../service/industry'
import router from '../router'

export default {
    setup() {
        const base = "FinanceWeekTagScoreDetail"
        const selectKey = base + "Select"
        const sortPropKey = base + "SortProp"
        const sortOrderKey = base + "SortOrder"

        const state = reactive({
            raw_data: null,
            tableData: [],
            tags: [],
            dates: [],
            sort: { 
                prop: sessionStorage.getItem(sortPropKey) || 'date' , 
                order: sessionStorage.getItem(sortOrderKey) || 'descending' 
            }
        })

        const sortChange = (column, prop, order) => {
            sessionStorage.setItem(sortPropKey, column.prop)
            sessionStorage.setItem(sortOrderKey, column.order)
        }

        const loadData = () => {
            getWeekTagScoreStat().then(res => {

                state.raw_data = res.data
                state.tags = Object.keys(state.raw_data)

                // 最大记录数
                let maxRecord = 0
                let maxTag = ''
                state.tags.forEach(tag => {
                    if (maxRecord < state.raw_data[tag].length) {
                        maxRecord = state.raw_data[tag].length
                        maxTag = tag
                        //dates = state.raw_data[stock].map(item => item.date)
                    }
                })

                let tableDataMap = new Map()

                // 设置初始值
                let dates = []
                state.raw_data[maxTag].forEach(item => {
                    dates.push(item.date)
                })
                state.dates = dates

                state.tags.forEach(tag => {
                    let tmp = {} 
                    tmp['tag'] = tag

                    dates.forEach(date =>{
                        tmp[date] = null
                    })

                    tableDataMap.set(tag,  tmp)
                })

                state.tags.forEach(tag => {
                    state.raw_data[tag].forEach(item => {
                        tableDataMap.get(tag)[item.date] = item.score
                    })
                })
                state.tableData = Array.from(tableDataMap.values())
            })
        }

        loadData()

        const tableColumnClassName = ({row, column, rowIndex, columnIndex}) => {

            let cell = column.label
            let score = row[cell]
            if (score && score < 0) {
                return 'pctlt0-cell'
            }
        }

        const tableCellClick = (row, column, cell, event) => {
            let tagName = row.tag
            if (column.label == 'Tag') {
                router.push({
                    path: "/industry",
                    query: {
                        industry: tagName,
                    }
                })
            }
        }
    
        return {state, tableColumnClassName, tableCellClick,sortChange}
    }
}
</script>

<style scope>
.pctlt0-cell {
    background: rgb(186, 246, 164);
}
</style>